રિએક્ટ useState: સ્ટેટ હૂક ઓપ્ટિમાઇઝેશન અને શ્રેષ્ઠ પ્રથાઓ

useState હૂક રિએક્ટમાં ફંક્શનલ કમ્પોનન્ટ સ્ટેટ મેનેજમેન્ટનો એક મુખ્ય આધારસ્તંભ છે. વાપરવામાં સરળ હોવા છતાં, અયોગ્ય હેન્ડલિંગ પ્રદર્શનમાં અવરોધો અને અનપેક્ષિત વર્તન તરફ દોરી શકે છે, ખાસ કરીને જટિલ એપ્લિકેશન્સમાં. આ માર્ગદર્શિકા useState ઓપ્ટિમાઇઝેશન તકનીકો અને શ્રેષ્ઠ પ્રથાઓનું વ્યાપક સંશોધન પ્રદાન કરે છે, જે ખાતરી કરે છે કે તમારી રિએક્ટ એપ્લિકેશન્સ વૈશ્વિક પ્રેક્ષકો માટે કાર્યક્ષમ, જાળવણીક્ષમ અને સ્કેલેબલ છે.

useState ની મૂળભૂત બાબતોને સમજવી

ઓપ્ટિમાઇઝેશનમાં ઊંડા ઉતરતા પહેલાં, ચાલો ઝડપથી મૂળભૂત બાબતોને યાદ કરી લઈએ. useState હૂક તમને ફંક્શનલ કમ્પોનન્ટ્સમાં સ્ટેટ ઉમેરવાની મંજૂરી આપે છે. તે એક પ્રારંભિક સ્ટેટ મૂલ્યને આર્ગ્યુમેન્ટ તરીકે લે છે અને વર્તમાન સ્ટેટ અને તેને અપડેટ કરવા માટેનું એક ફંક્શન ધરાવતો એરે પરત કરે છે.

ઉદાહરણ:

            import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, count વર્તમાન સ્ટેટ મૂલ્ય ધરાવે છે, અને setCount તેને અપડેટ કરવા માટે વપરાતું ફંક્શન છે. બટન પર ક્લિક કરવાથી કાઉન્ટ વધે છે.

useState સાથે સામાન્ય ભૂલો અને પ્રદર્શન સમસ્યાઓ

દેખીતી રીતે સીધુંસાદું હોવા છતાં, જો useState નો સાવચેતીપૂર્વક ઉપયોગ ન કરવામાં આવે તો તે પ્રદર્શન સમસ્યાઓ ઊભી કરી શકે છે. અહીં કેટલીક સામાન્ય ભૂલો છે:

• બિનજરૂરી રી-રેન્ડર્સ: સૌથી સામાન્ય સમસ્યા ત્યારે ઉદ્ભવે છે જ્યારે કમ્પોનન્ટ્સના પ્રોપ્સ બદલાયા ન હોય છતાં તે રી-રેન્ડર થાય છે. આ ત્યારે થઈ શકે છે જ્યારે સ્ટેટ વારંવાર અપડેટ થાય છે અથવા જ્યારે અપડેટ્સ ચાઇલ્ડ કમ્પોનન્ટ્સમાં બિનજરૂરી રી-રેન્ડર્સને ટ્રિગર કરે છે.
• ડાયરેક્ટ સ્ટેટ મ્યુટેશન: સ્ટેટને સીધું જ સંશોધિત કરવું (દા.ત., state.property = newValue) રિએક્ટના અપડેટ મિકેનિઝમને બાયપાસ કરે છે અને અણધાર્યા વર્તન તરફ દોરી શકે છે. હંમેશા useState દ્વારા પ્રદાન કરાયેલ સ્ટેટ અપડેટર ફંક્શનનો ઉપયોગ કરો.
• જટિલ સ્ટેટ અપડેટ્સ: સ્ટેટ અપડેટર ફંક્શનની અંદર મોંઘી ગણતરીઓ અથવા જટિલ રૂપાંતરણો કરવાથી તમારી એપ્લિકેશનની ગતિ ધીમી પડી શકે છે.
• ખોટી પ્રારંભિક સ્ટેટ: ખોટી અથવા નબળી રીતે પ્રારંભ કરાયેલ પ્રારંભિક સ્ટેટ ભૂલો અને અનપેક્ષિત વર્તન તરફ દોરી શકે છે.

useState માટે ઓપ્ટિમાઇઝેશન તકનીકો

હવે, ચાલો આ સમસ્યાઓને ઘટાડવા અને તમારી રિએક્ટ એપ્લિકેશન્સના પ્રદર્શનને વધારવા માટે વિવિધ ઓપ્ટિમાઇઝેશન તકનીકોનું અન્વેષણ કરીએ:

૧. ફંક્શનલ અપડેટ્સનો ઉપયોગ કરવો

જ્યારે સ્ટેટને તેના પાછલા મૂલ્યના આધારે અપડેટ કરો, ત્યારે સ્ટેટ અપડેટર ફંક્શનના ફંક્શનલ ફોર્મનો ઉપયોગ કરો. આ સુનિશ્ચિત કરે છે કે તમે સૌથી અપ-ટુ-ડેટ સ્ટેટ સાથે કામ કરી રહ્યા છો, ખાસ કરીને અસુમેળ પરિસ્થિતિઓમાં અથવા જ્યારે બહુવિધ અપડેટ્સ એકસાથે બૅચ કરવામાં આવે છે.

ઉદાહરણ (ખોટું):

            function IncorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(count + 1);
    setCount(count + 1); // Potentially incorrect: relies on stale `count` value
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ઉદાહરણ (સાચું):

            function CorrectComponent() {
  const [count, setCount] = useState(0);

  const incrementTwice = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1); // Correct: uses the previous state for each update
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementTwice}>Increment Twice</button>
    </div>
  );
}

            

              
                Copy
              
            
          

સાચા ઉદાહરણમાં, સ્ટેટ અપડેટર ફંક્શન પાછલી સ્ટેટને આર્ગ્યુમેન્ટ (prevCount) તરીકે મેળવે છે, જે તમને સમય અથવા બૅચિંગને ધ્યાનમાં લીધા વિના સચોટ અપડેટ્સ કરવાની મંજૂરી આપે છે.

૨. ઇમ્યુટેબિલિટી (અપરિવર્તનશીલતા) મુખ્ય છે

સ્ટેટને ક્યારેય સીધું સંશોધિત કરશો નહીં. અપડેટ કરતી વખતે હંમેશા સ્ટેટ ઓબ્જેક્ટ અથવા એરેની નવી નકલ બનાવો. આ સુનિશ્ચિત કરે છે કે રિએક્ટ ફેરફારોને અસરકારક રીતે શોધી શકે છે અને ફક્ત જરૂર પડે ત્યારે જ રી-રેન્ડર્સ ટ્રિગર કરી શકે છે.

ઉદાહરણ (ખોટું - ડાયરેક્ટ મ્યુટેશન):

            function IncorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    user.name = 'Jane'; // Direct mutation: Avoid this!
    setUser(user); // React might not detect the change
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ઉદાહરણ (સાચું - ઇમ્યુટેબિલિટીનો ઉપયોગ કરીને):

            function CorrectObjectComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser({ ...user, name: 'Jane' }); // Create a new object with the updated name
  };

  return (
    <div>
      <p>Name: {user.name}, Age: {user.age}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

            

              
                Copy
              
            
          

સાચા ઉદાહરણમાં, સ્પ્રેડ ઓપરેટર (...) user ઓબ્જેક્ટની શેલો કોપી બનાવે છે, જે સુનિશ્ચિત કરે છે કે setUser એક નવો ઓબ્જેક્ટ મેળવે છે અને રી-રેન્ડર ટ્રિગર કરે છે.

૩. બિનજરૂરી રી-રેન્ડર્સ ટાળવા માટે useMemo નો ઉપયોગ

useMemo હૂકનો ઉપયોગ મોંઘી ગણતરીઓ અથવા ઓબ્જેક્ટ ક્રિએશનના પરિણામને મેમોઇઝ (કેશ) કરવા માટે કરી શકાય છે. આનાથી આ ગણતરીઓ દરેક રી-રેન્ડર પર બિનજરૂરી રીતે ફરીથી ચલાવવાથી બચે છે.

ઉદાહરણ:

            import React, { useState, useMemo } from 'react';

function ExpensiveCalculationComponent() {
  const [count, setCount] = useState(0);

  // Simulate an expensive calculation
  const expensiveValue = useMemo(() => {
    console.log('Performing expensive calculation...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  }, []); // Empty dependency array: only calculate once on initial render

  return (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
    </div>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, expensiveValue ફક્ત ત્યારે જ ગણવામાં આવે છે જ્યારે કમ્પોનન્ટ શરૂઆતમાં રેન્ડર થાય છે. પછીના રી-રેન્ડર્સ (જે count સ્ટેટ અપડેટ દ્વારા ટ્રિગર થાય છે) કેશ કરેલા મૂલ્યનો ઉપયોગ કરશે, મોંઘી ગણતરીને ટાળશે.

૪. ઇવેન્ટ હેન્ડલર્સને મેમોઇઝ કરવા માટે useCallback

જ્યારે ઇવેન્ટ હેન્ડલર ફંક્શન્સને ચાઇલ્ડ કમ્પોનન્ટ્સમાં પ્રોપ્સ તરીકે પસાર કરવામાં આવે, ત્યારે ફંક્શનને મેમોઇઝ કરવા માટે useCallback નો ઉપયોગ કરો. આનાથી જ્યારે પેરેન્ટ કમ્પોનન્ટ રી-રેન્ડર થાય ત્યારે ચાઇલ્ડ કમ્પોનન્ટને બિનજરૂરી રીતે રી-રેન્ડર થવાથી બચાવે છે.

ઉદાહરણ:

            import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // Memoize the increment function using useCallback
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Dependency array: re-create the function only when 'count' changes

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
}

// Assuming ChildComponent is memoized using React.memo
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent re-rendered!');
  return <button onClick={onClick}>Increment (Child)</button>;
});

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, useCallback increment ફંક્શનને મેમોઇઝ કરે છે, જે count મૂલ્ય (અને તેથી increment ફંક્શન) બદલાય નહીં ત્યાં સુધી ChildComponent ને રી-રેન્ડર થવાથી રોકે છે.

૫. સ્ટેટને નાના, સ્વતંત્ર ટુકડાઓમાં વિભાજીત કરવું

જો તમારા કમ્પોનન્ટમાં મોટો અને જટિલ સ્ટેટ ઓબ્જેક્ટ હોય, તો તેને બહુવિધ useState હૂકનો ઉપયોગ કરીને નાના, સ્વતંત્ર સ્ટેટના ટુકડાઓમાં વિભાજીત કરવાનું વિચારો. આનાથી રિએક્ટને ફક્ત કમ્પોનન્ટના તે જ ભાગોને અપડેટ કરવાની મંજૂરી મળે છે જે બદલાયેલ સ્ટેટ પર આધાર રાખે છે, જેનાથી બિનજરૂરી રી-રેન્ડર્સ ઘટે છે.

ઉદાહરણ (પહેલાં - મોટો સ્ટેટ ઓબ્જેક્ટ):

            function LargeStateComponent() {
  const [state, setState] = useState({
    name: 'John',
    age: 30,
    city: 'New York',
    country: 'USA'
  });

  const updateName = () => {
    setState({ ...state, name: 'Jane' });
  };

  const updateAge = () => {
    setState({ ...state, age: 31 });
  };

  return (
    <div>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
      <p>City: {state.city}</p>
      <p>Country: {state.country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

ઉદાહરણ (પછી - સ્ટેટ વિભાજન):

            function SplitStateComponent() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);
  const [city, setCity] = useState('New York');
  const [country, setCountry] = useState('USA');

  const updateName = () => {
    setName('Jane');
  };

  const updateAge = () => {
    setAge(31);
  };

  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>City: {city}</p>
      <p>Country: {country}</p>
      <button onClick={updateName}>Update Name</button>
      <button onClick={updateAge}>Update Age</button>
    </div>
  );
}

            

              
                Copy
              
            
          

સ્ટેટને વ્યક્તિગત useState હૂકમાં વિભાજીત કરીને, name ને અપડેટ કરવાથી ફક્ત કમ્પોનન્ટના તે જ ભાગો રી-રેન્ડર થાય છે જે name સ્ટેટ પર આધાર રાખે છે, જેનાથી પ્રદર્શનમાં સુધારો થાય છે.

૬. મોંઘી પ્રારંભિક સ્ટેટ માટે લેઝી ઇનિશિયલાઇઝેશન

જો પ્રારંભિક સ્ટેટની ગણતરી કરવી કમ્પ્યુટેશનલી મોંઘી હોય, તો useState ની લેઝી ઇનિશિયલાઇઝેશન સુવિધાનો ઉપયોગ કરો. પ્રારંભિક મૂલ્ય સીધું આપવાને બદલે, તમે એક ફંક્શન પસાર કરી શકો છો જે પ્રારંભિક મૂલ્ય પરત કરે છે. આ ફંક્શન ફક્ત એક જ વાર, પ્રારંભિક રેન્ડર દરમિયાન જ ચલાવવામાં આવશે.

ઉદાહરણ:

            import React, { useState } from 'react';

function LazyInitializationComponent() {
  // Expensive function to calculate initial state
  const expensiveInitialState = () => {
    console.log('Calculating initial state...');
    let result = 0;
    for (let i = 0; i < 100000000; i++) {
      result += i;
    }
    return result;
  };

  const [value, setValue] = useState(expensiveInitialState);

  return (
    <div>
      <p>Value: {value}</p>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, expensiveInitialState ફંક્શન ફક્ત એક જ વાર ચલાવવામાં આવે છે જ્યારે કમ્પોનન્ટ માઉન્ટ થાય છે. જો તમે expensiveInitialState() નું પરિણામ સીધું જ useState માં પસાર કરત, તો તે દરેક રી-રેન્ડર પર ચલાવવામાં આવત, ભલે પ્રારંભિક સ્ટેટની ગણતરી ફક્ત એક જ વાર કરવાની જરૂર હોય.

૭. જટિલ સ્ટેટ લોજિક માટે useReducer નો ઉપયોગ

જટિલ સ્ટેટ લોજિકવાળા કમ્પોનન્ટ્સ માટે, જેમાં બહુવિધ સબ-વેલ્યુઝ અથવા જટિલ સ્ટેટ ટ્રાન્ઝિશન્સ સામેલ હોય, useState ને બદલે useReducer હૂકનો ઉપયોગ કરવાનું વિચારો. useReducer સ્ટેટ મેનેજ કરવા માટે વધુ સંરચિત અને અનુમાનિત રીત પ્રદાન કરે છે, ખાસ કરીને સંબંધિત સ્ટેટ અપડેટ્સ સાથે કામ કરતી વખતે.

ઉદાહરણ:

            import React, { useReducer } from 'react';

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'RESET':
      return { ...state, count: 0 };
    default:
      return state;
  }
};

// Initial state
const initialState = { count: 0 };

function ReducerComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </div>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, useReducer count સ્ટેટને મેનેજ કરે છે અને વિવિધ ક્રિયાઓના આધારે સ્ટેટ અપડેટ્સ ટ્રિગર કરવા માટે dispatch ફંક્શન પ્રદાન કરે છે. આ અભિગમ ખાસ કરીને બહુવિધ સંબંધિત અપડેટ્સ અથવા જટિલ સંક્રમણો સાથે સ્ટેટ મેનેજ કરવા માટે ફાયદાકારક છે.

૮. ફંક્શનલ કમ્પોનન્ટ મેમોઇઝેશન માટે React.memo

તમારા ફંક્શનલ કમ્પોનન્ટ્સને React.memo વડે રેપ કરો જેથી જ્યારે પ્રોપ્સ બદલાયા ન હોય ત્યારે રી-રેન્ડર અટકાવી શકાય. React.memo પ્રોપ્સની શેલો કમ્પેરિઝન કરે છે અને જો પ્રોપ્સ અલગ હોય તો જ કમ્પોનન્ટને રી-રેન્ડર કરે છે.

ઉદાહરણ:

            import React from 'react';

// Memoize the component using React.memo
const MyMemoizedComponent = React.memo(({ data }) => {
  console.log('MyMemoizedComponent re-rendered!');
  return <p>Data: {data}</p>;
});

            

              
                Copy
              
            
          

React.memo પ્રદર્શનમાં નોંધપાત્ર સુધારો કરી શકે છે, ખાસ કરીને સ્થિર અથવા ભાગ્યે જ બદલાતા પ્રોપ્સવાળા વારંવાર રી-રેન્ડર થતા કમ્પોનન્ટ્સ માટે.

વૈશ્વિક સંદર્ભમાં useState માટે શ્રેષ્ઠ પ્રથાઓ

વૈશ્વિક પ્રેક્ષકો માટે રિએક્ટ એપ્લિકેશન્સ વિકસાવતી વખતે, આ વધારાની શ્રેષ્ઠ પ્રથાઓ ધ્યાનમાં લો:

• આંતરરાષ્ટ્રીયકરણ (i18n): અનુવાદોને મેનેજ કરવા અને તમારી એપ્લિકેશનના UI ને વિવિધ ભાષાઓ અને સ્થાનોને અનુકૂળ બનાવવા માટે react-intl અથવા i18next જેવી લાઇબ્રેરીનો ઉપયોગ કરો. વર્તમાન લોકેલ સંબંધિત સ્ટેટને કાળજીપૂર્વક મેનેજ કરવું જોઈએ જેથી ટેક્સ્ટ અને નંબરોનું સુસંગત અને સાચું પ્રદર્શન સુનિશ્ચિત કરી શકાય. ઉદાહરણ તરીકે, તારીખો, કરન્સી અને નંબર ફોર્મેટ્સ વિશ્વભરમાં વ્યાપકપણે બદલાય છે.
• સ્થાનિકીકરણ (l10n): ડેટા પ્રદર્શિત કરતી વખતે વિવિધ સાંસ્કૃતિક સંમેલનો ધ્યાનમાં લો. ઉદાહરણ તરીકે, તારીખ ફોર્મેટ્સ બદલાય છે (MM/DD/YYYY vs DD/MM/YYYY), અને દરેક દેશ માટે ચલણના પ્રતીકો અલગ હોય છે (€, $, ¥). આ સેટિંગ્સ સંબંધિત સ્ટેટને સ્થાનિકીકરણ કરવું જોઈએ.
• જમણે-થી-ડાબે (RTL) લેઆઉટ્સ: ખાતરી કરો કે તમારી એપ્લિકેશન અરબી અને હિબ્રુ જેવી RTL ભાષાઓને સપોર્ટ કરે છે. CSS લોજિકલ પ્રોપર્ટીઝ (દા.ત., margin-left ને બદલે margin-inline-start) અને લેઆઉટ મિરરિંગને હેન્ડલ કરવા માટે rtlcss જેવી લાઇબ્રેરીનો ઉપયોગ કરો. જો જરૂરી હોય તો સ્ટેટનો ઉપયોગ કરીને લેઆઉટની દિશાને મેનેજ કરો.
• સમય ઝોન: તારીખો અને સમય સાથે કામ કરતી વખતે, સમય ઝોનનું ધ્યાન રાખો. સમય ઝોન રૂપાંતરણોને હેન્ડલ કરવા અને વપરાશકર્તાના સ્થાનિક સમય ઝોનમાં સમય પ્રદર્શિત કરવા માટે moment-timezone અથવા date-fns-timezone જેવી લાઇબ્રેરીનો ઉપયોગ કરો. વપરાશકર્તાનો વર્તમાન સમય ઝોન સ્ટેટમાં સંગ્રહિત કરી શકાય છે અને તેમના સ્થાનના આધારે અપડેટ કરી શકાય છે.
• સુલભતા (a11y): WCAG માર્ગદર્શિકાઓનું પાલન કરીને, તમારી એપ્લિકેશનને સુલભતાને ધ્યાનમાં રાખીને ડિઝાઇન કરો. ખાતરી કરો કે તમારા કમ્પોનન્ટ્સ વિકલાંગ લોકો દ્વારા ઉપયોગમાં લઈ શકાય તેવા છે, જેમાં સ્ક્રીન રીડર્સ અથવા સહાયક તકનીકોનો ઉપયોગ કરનારાઓનો સમાવેશ થાય છે. ઉદાહરણ તરીકે, ખાતરી કરો કે બધા ફોર્મ એલિમેન્ટ્સમાં લેબલ્સ હોય, અને છબીઓ માટે વૈકલ્પિક ટેક્સ્ટ પ્રદાન કરો. સામાન્ય સુલભતા સમસ્યાઓ પકડવા માટે eslint-plugin-jsx-a11y જેવા લિન્ટરનો ઉપયોગ કરવાનું વિચારો.

વ્યાવહારિક ઉદાહરણો અને ઉપયોગના કિસ્સાઓ

ચાલો વાસ્તવિક-વિશ્વના દૃશ્યોમાં આ ઓપ્ટિમાઇઝેશન તકનીકોને કેવી રીતે લાગુ કરવી તેના કેટલાક વ્યાવહારિક ઉદાહરણો જોઈએ:

૧. સર્ચ કમ્પોનન્ટને ઓપ્ટિમાઇઝ કરવું

એક સર્ચ કમ્પોનન્ટનો વિચાર કરો જે વપરાશકર્તાના ઇનપુટના આધારે વસ્તુઓની મોટી સૂચિને ફિલ્ટર કરે છે. આ કમ્પોનન્ટને ઓપ્ટિમાઇઝ કરવા માટે, તમે ફિલ્ટર કરેલી સૂચિને મેમોઇઝ કરવા માટે useMemo અને સર્ચ હેન્ડલરને મેમોઇઝ કરવા માટે useCallback નો ઉપયોગ કરી શકો છો.

            import React, { useState, useMemo, useCallback } from 'react';

function SearchComponent({ items }) {
  const [searchTerm, setSearchTerm] = useState('');

  // Memoize the filtered list
  const filteredItems = useMemo(() => {
    console.log('Filtering items...');
    return items.filter(item =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [items, searchTerm]);

  // Memoize the search handler
  const handleSearch = useCallback(event => {
    setSearchTerm(event.target.value);
  }, []);

  return (
    <div>
      <input type="text" placeholder="Search..." onChange={handleSearch} />
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, filteredItems ફક્ત ત્યારે જ ફરીથી ગણવામાં આવે છે જ્યારે items અથવા searchTerm બદલાય છે. handleSearch ફંક્શન મેમોઇઝ થયેલ છે, જે ચાઇલ્ડ કમ્પોનન્ટ્સના બિનજરૂરી રી-રેન્ડર્સને અટકાવે છે.

૨. ફોર્મ કમ્પોનન્ટને ઓપ્ટિમાઇઝ કરવું

ફોર્મ્સમાં ઘણીવાર બહુવિધ સ્ટેટ અપડેટ્સ અને વેલિડેશન્સ સામેલ હોય છે. ફોર્મ કમ્પોનન્ટને ઓપ્ટિમાઇઝ કરવા માટે, ફોર્મ સ્ટેટને મેનેજ કરવા માટે useReducer અને ફોર્મ સબમિશન હેન્ડલરને મેમોઇઝ કરવા માટે useCallback નો ઉપયોગ કરો.

            import React, { useReducer, useCallback } from 'react';

// Define the reducer function
const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value };
    case 'SUBMIT':
      // Perform validation here
      return state;
    default:
      return state;
  }
};

// Initial state
const initialFormState = {
  name: '',
  email: '',
  message: ''
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, initialFormState);

  // Memoize the form submission handler
  const handleSubmit = useCallback(event => {
    event.preventDefault();
    dispatch({ type: 'SUBMIT' });
    console.log('Form submitted:', state);
  }, [state]);

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_FIELD', field: event.target.name, value: event.target.value });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={state.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={state.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={state.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

            

              
                Copy
              
            
          

આ ઉદાહરણમાં, useReducer ફોર્મ સ્ટેટને મેનેજ કરે છે, અને useCallback handleSubmit ફંક્શનને મેમોઇઝ કરે છે. આ ફોર્મ કમ્પોનન્ટના પ્રદર્શનને સુધારવામાં મદદ કરે છે, ખાસ કરીને જ્યારે જટિલ વેલિડેશન્સ અથવા અસુમેળ કામગીરીઓ સાથે કામ કરતી વખતે.

નિષ્કર્ષ

useState હૂક ફંક્શનલ રિએક્ટ કમ્પોનન્ટ્સમાં સ્ટેટ મેનેજ કરવા માટે એક શક્તિશાળી સાધન છે. તેની સૂક્ષ્મતાને સમજીને અને આ માર્ગદર્શિકામાં ચર્ચાયેલ ઓપ્ટિમાઇઝેશન તકનીકોને લાગુ કરીને, તમે વૈશ્વિક પ્રેક્ષકો માટે કાર્યક્ષમ, જાળવણીક્ષમ અને સ્કેલેબલ રિએક્ટ એપ્લિકેશન્સ બનાવી શકો છો. ઇમ્યુટેબિલિટીને પ્રાધાન્ય આપવાનું યાદ રાખો, મોંઘી ગણતરીઓ અને ઇવેન્ટ હેન્ડલર્સને મેમોઇઝ કરો, યોગ્ય હોય ત્યારે સ્ટેટને નાના ટુકડાઓમાં વિભાજીત કરો, અને જટિલ સ્ટેટ લોજિક માટે useReducer નો ઉપયોગ કરવાનું વિચારો. તમારી એપ્લિકેશનના વૈશ્વિક સંદર્ભને હંમેશા ધ્યાનમાં રાખો, i18n, l10n, RTL લેઆઉટ્સ, સમય ઝોન અને સુલભતાને ધ્યાનમાં રાખીને. આ શ્રેષ્ઠ પ્રથાઓનું પાલન કરીને, તમે ખાતરી કરી શકો છો કે તમારી રિએક્ટ એપ્લિકેશન્સ માત્ર ઝડપી અને કાર્યક્ષમ જ નથી, પરંતુ વિશ્વભરના વપરાશકર્તાઓ માટે સુલભ અને ઉપયોગી પણ છે.

વધુ શીખવા માટે

• રિએક્ટ ડોક્યુમેન્ટેશન: https://reactjs.org/docs/hooks-state.html
• useReducer હૂક: https://reactjs.org/docs/hooks-reference.html#usereducer
• useMemo હૂક: https://reactjs.org/docs/hooks-reference.html#usememo
• useCallback હૂક: https://reactjs.org/docs/hooks-reference.html#usecallback
• React.memo: https://reactjs.org/docs/react-api.html#reactmemo